<template>
	<view>
		<view class="position-fixed left-0 w-100" :style="{ top: topFixed, 'z-index': 100 }">
			<u-tabs :list="tabs" :is-scroll="false" activeColor="var(--mainColor)" :current="current"
				@change="change"></u-tabs>
		</view>
		<view class="page" v-if="current==0">
			<view class="bg-white">
				<u-cell-item title="余额" @click="toPage(1)" :value="`￥${thousandsSeparator(userInfo.credit1)}`">
					<u-icon class="u-p-r-20" slot="icon" size="42" :name="`/static/mine/asset1.png`"></u-icon>
				</u-cell-item>
				<u-cell-item title="积分" @click="toPage(2)" :value="thousandsSeparator(userInfo.total_score)">
					<u-icon class="u-p-r-20" slot="icon" size="42" :name="`/static/mine/asset2.png`"></u-icon>
				</u-cell-item>
				<u-cell-item title="记账点" @click="toPage(3)" :value="thousandsSeparator(userInfo.credit4)">
					<u-icon class="u-p-r-20" slot="icon" size="42" :name="`/static/mine/asset3.png`"></u-icon>
				</u-cell-item>
				<u-cell-item title="贡献值" @click="toPage(4)" :value="thousandsSeparator(userInfo.credit3)">
					<u-icon class="u-p-r-20" slot="icon" size="42" :name="`/static/mine/asset4.png`"></u-icon>
				</u-cell-item>
				<u-cell-item title="权益值" @click="toPage(5)" :value="thousandsSeparator(userInfo.credit5)">
					<u-icon class="u-p-r-20" slot="icon" size="42" :name="`/static/mine/asset5.png`"></u-icon>
				</u-cell-item>
				<!-- <u-cell-item title="股票金额数" @click="toPage(6)">
				<u-icon class="u-p-r-20" slot="icon" size="42" :name="`/static/mine/asset6.png`"></u-icon>
			</u-cell-item> -->
				<u-cell-item title="NFT" @click="toPage(7)">
					<u-icon class="u-p-r-20" slot="icon" size="42" :name="`/static/mine/asset4.png`"></u-icon>
				</u-cell-item>
			</view>
			<!-- <view class="u-m-x-20 border bg-white u-m-t-16" style="border-radius: 5rpx;">
				<view class="u-p-y-30 text-center font-35 border-bottom font-weight-bold">
					繁星计划
				</view>
				<view class="flex border-bottom font-30 font-weight-bold">
					<view class="flex-1 flex justify-between border-right u-p-y-40">
						<view class="">
							<text class="u-p-l-15">待提现收益</text>
						</view>
						<view class="">
							<text style="color: #FF1E1A;">¥</text>
							<text class="u-p-r-10" style="color: #FF1E1A;">{{AwardInfo.wait_withdraw || 0}}</text>
						</view>
					</view>
					<view class="flex-1 flex justify-between u-p-y-40">
						<view class="">
							<text class="u-p-l-15">已提现收益</text>
						</view>
						<view class="font-24">
							<text style="color: #FF1E1A;">¥</text>
							<text class="u-p-r-10" style="color: #FF1E1A;">{{AwardInfo.already_withdraw || 0}}</text>
						</view>
					</view>
				</view>
				<view class="flex border-bottom font-30 font-weight-bold">
					<view class="flex-1 flex justify-between border-right u-p-y-40">
						<view class="">
							<text class="u-p-l-15">本月已消费</text>
						</view>
						<view class="">
							<text class="u-p-r-10">{{AwardInfo.this_month_order || 0}}次</text>

						</view>
					</view>
					<view class="flex-1 flex justify-between u-p-y-40">
						<view class="">
							<text class="u-p-l-15">已推荐VIP</text>
						</view>
						<view class="font-24">
							<text class="u-p-r-10">{{AwardInfo.this_month_tj_vip_num || 0 }}人</text>
						</view>
					</view>
				</view>
				<view class="u-m-t-16 u-p-b-20">
					<view class="flex justify-between font-30 font-weight-bold">
						<view class="flex u-p-l-15">
							已推荐VIP完成浏览
						</view>
						<view class="u-p-r-10">
							<text class="p-r-15">已完成：</text>
							<text>{{AwardInfo.vip_done || 0}}人</text>
						</view>
					</view>
					<view class="u-p-x-10 font-30 font-weight-bold">
						<scroll-view scroll-y="true" style="height: 300rpx;" :show-scrollbar="false">
							<view class="" v-for="item in AwardInfo.this_month_tj_vip_list" :key="item.name">
								<view class="u-p-l-15 u-m-t-16 flex align-center flex justify-between">
									<view class="flex align-center">
										<view class="" style="">
											<uni-icons :type="item.is_done==1?'checkbox':'circle'"
												size="18"></uni-icons>
										</view>
										<view class="u-m-l-15 font-30">
											{{item.nickname}}
										</view>
									</view>
									<view class="">
										{{item.order_num}}次
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="text-center" style="width: 375rpx;border-radius: 50%;margin: 0 auto;">
							<view class="flex justify-center align-center">
								<uni-icons type="info" @click="showMask=true"
									style="position: relative; top: 5rpx;"></uni-icons> <text
									@click="showMask=true">奖励规则说明</text>
							</view>
							<view @click="showMask=false" v-if="showMask"
								style="border-radius: 16rpx;position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 500rpx; height: 500rpx; z-index: 9999999; background-color: #fff;">
								<view style="padding:32rpx" v-html="AwardInfo.rule">

								</view>
							</view>
							<button class="btn-theme" style="border-radius: 50rpx; margin-top: 10rpx;"
								@click="dgpwithdraw">提现</button>
						</view>
					</view>
				</view>
			</view> -->
			<view class="mask" @click="showMask=false" v-if="showMask">
			</view>
		</view>
		<view v-if="current==1">
			<!-- #ifdef MP-WEIXIN -->
			<view class="download-app">
				<text>钱包功能在仅在app中支持，请下载app</text>
				<text>请扫描二维码或复制下载链接在浏览器打开</text>
				<view>
					<tki-qrcode class="code-img" ref="qrcode" :size="220" :val="downloadUrl" @result="qrR" />
				</view>
				<view class="url">{{downloadUrl}}</view>
				<button @click="handleDownloadApp">复制下载地址</button>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<wallet @cancel="handleCancelPwd" />
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	const urls = {
		1: '/pages/mine/mineBalance/balance/balance',
		2: '/pages/mine/mineBalance/integralDetail/integralDetail',
		3: '/pages/mine/mineBalance/accountingDetail/accountingDetail',
		4: '/pages/mine/mineBalance/contributeDetail/contributeDetail',
		5: '/pages/mine/mineBalance/equityDetail/equityDetail',
		6: '/pages/mine/mineBalance/shareCertificateDetail/shareCertificateDetail',
		7: '/pages/mine/mineBalance/nft/nft',
	}
	import {
		mapGetters
	} from 'vuex'
	// #ifndef MP-WEIXIN
	import wallet from "./Wallet"
	// #endif
	import {
		MineCenterApi
	} from '@/api/serves.js'
	import {
		thousandsSeparator,
		copyDownloadUrl
	} from "@/common/utils/utils.js"
	import {
		checkAppApi
	} from '@/api/checkApp.js'
	// #ifdef MP-WEIXIN
	import tkiQrcode from "./components/tki-qrcode/tki-qrcode.vue";
	// #endif
	export default {
		// #ifndef MP-WEIXIN
		components: {
			wallet
		},
		// #endif
		// #ifdef MP-WEIXIN
		components: {
			tkiQrcode
		},
		// #endif
		data() {
			return {
				copyDownloadUrl,
				downloadUrl: "",
				thousandsSeparator,
				tabs: [{
						name: "资产"
					},
					{
						name: "钱包"
					}
				],
				current: 0,
				AwardInfo: {},
				showMask: false, // 控制遮罩显示与隐藏,
				list: [{
					nickname: "黎明",
					is_done: 1,
					order_num: 99999
				}, {
					nickname: "13213",
					is_done: 0,
					order_num: 99999
				}, {
					nickname: "456",
					is_done: 1,
					order_num: 99999
				}, {
					nickname: "999",
					is_done: 0,
					order_num: 99999
				}, {
					nickname: "10000",
					is_done: 1,
					order_num: 99999
				}]
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			checkAppApi.getAppInfo().then(res => {
				if (res.code == 1) {
					this.downloadUrl = this.$_BASE_IMG_API + res.data.app_package
				} else {
					uni.showToast({
						title: "获取下载地址失败",
						icon: "none"
					})
				}
			})
			// #endif
		},
		computed: {
			...mapGetters({
				userInfo: "user/userInfo"
			}),
			topFixed() {
				return this.windowTop + 'px'
			},
		},
		methods: {
			handleDownloadApp() {
				this.copyDownloadUrl()
			},
			qrR(res) {
				this.qrSrc = res
			},
			handleCancelPwd() {
				this.current = 0
			},
			change(e) {
				this.current = e
				// #ifdef MP-WEIXIN
				if (e == 1) {
					this.$nextTick(() => {
						this.$refs.qrcode._makeCode()
					})
				}
				// #endif
			},
			open() {
				this.$refs.popup.open('center')
			},
			toPage(index) {
				uni.navigateTo({
					url: urls[index]
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			GetAwardInfo() {
				MineCenterApi.dgpGetAwardInfo().then((res) => {
					// console.log("返回的数据来源", );
					this.AwardInfo = res.data
				})
			},
			dgpwithdraw() {
				// if(this.AwardInfo.wait_withdraw==0) return;
				MineCenterApi.dgpwithdraw().then((res) => {
					console.log(res);
					uni.showToast({
						icon: res.coed == 1 ? 'success' : 'none',
						title: res.msg
					})
					if (res.code == 1) {
						this.GetAwardInfo() // 刷新数据
					}
				})
			}
		},
		onShow() {
			this.GetAwardInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #f9f9f9;
		padding-bottom: 16rpx;
		padding-top: 100rpx;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
		padding: 32rpx;
		background-color: rgba(0, 0, 0, 0.5); // 遮罩的颜色和透明度
		z-index: 9997; // 遮罩的层级
	}

	.content {
		/* 内容区域的样式 */
	}

	.download-app {
		height: calc(100vh - 50px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20rpx;

		.url {
			max-width: 600rpx;
			text-align: center;
			word-break: break-all;
		}

		text {
			font-size: 32rpx;
		}

		button {
			background-color: var(--mainColor);
			color: white;
			font-size: 28rpx;
		}
	}
</style>